<template>
  <div class="bottom-view">
    <div class="view">
      <el-card shadow="hover">
        <template v-slot:header class="title">
          <div class="title-wrapper">关键词收索</div>
        </template>
        <template>
          <div class="chart-warpper">
            <div class="chart-inner">
              <div class="chart">
                <div class="chart-title">搜索用户数</div>
                <div class="chart-data">93,634</div>
                <v-chart ref="creditChartOne" :options="selectUserOptions()" />
              </div>
              <div class="chart">
                <div class="chart-title">搜索量</div>
                <div class="chart-data">198,782</div>
                <v-chart ref="creditChartTwo" :options="selectUserOptions()" />
              </div>
            </div>
            <div class="table-wapper">
              <el-table :data="tableData">
                <el-table-column prop="rank" label="排名" />
                <el-table-column prop="keyword" label="关键字" />
                <el-table-column prop="count" label="总搜索量" />
                <el-table-column prop="rank" label="搜索用户数" />
              </el-table>
              <el-pagination
                layout="prev, pager, next"
                :total="100"
                :page-size="4"
                background
                @current-change="onPageChange"
              />
            </div>
          </div>
        </template>
      </el-card>
    </div>
    <div class="view">
      <el-card shadow="hover">
        <template v-slot:header>
          <div class="title-wrapper">
            <div class="title">分类销售排行榜</div>
            <div class="radio-warpper">
              <el-radio-group v-model="radioSelect" size="small">
                <el-radio-button label="品类" />
                <el-radio-button label="商品" />
              </el-radio-group>
            </div>
          </div>
        </template>
        <template>
          <div class="chart-warpper">
            <v-chart ref="creditChart" :options="categoryOptions()" />
          </div>
        </template>
      </el-card>
    </div>
  </div>
</template>
<script>
import resize from '../../mixins/resize'
export default {
  mixins: [resize],
  data() {
    return {
      tableData: [
        { id: 1, rank: 1, keyword: '北京', count: 100, users: 90, range: 90 },
        { id: 2, rank: 2, keyword: '北京', count: 100, users: 90, range: 90 },
        { id: 3, rank: 3, keyword: '北京', count: 100, users: 90, range: 90 },
        { id: 4, rank: 4, keyword: '北京', count: 100, users: 90, range: 90 }
        // { id: 5, rank: 5, keyword: "北京", count: 100, users: 90, range: 90 },
        // { id: 6, rank: 6, keyword: "北京", count: 100, users: 90, range: 90 },
        // { id: 7, rank: 7, keyword: "北京", count: 100, users: 90, range: 90 },
        // { id: 8, rank: 8, keyword: "北京", count: 100, users: 90, range: 90 },
        // { id: 9, rank: 9, keyword: "北京", count: 100, users: 90, range: 90 },
        // { id: 10, rank: 10, keyword: "北京", count: 100, users: 90, range: 90 }
      ],
      radioSelect: '品类'
    }
  },
  methods: {
    onPageChange(page) {
      // console.log(page);
    },
    // 图表
    selectUserOptions() {
      return {
        xAxis: {
          type: 'category',
          boundaryGap: false
        },
        yAxis: {
          show: false,
          min: 0,
          max: 300
        },
        series: [
          {
            type: 'line',
            data: [100, 150, 200, 250, 200, 150, 100, 50, 100, 50],
            areaStyle: {
              color: 'rgba(95,187,255,0.5)'
            },
            lineStyle: {
              color: 'rgb(95,187,255)'
            },
            itemStyle: {
              opacity: 0
            },
            smooth: true
          }
        ],
        grid: {
          top: 0,
          left: 0,
          bottom: 0,
          right: 0
        }
      }
    },
    selectNumberOptions() {
      return {}
    },
    categoryOptions() {
      const modelData = [
        {
          value: 335,
          ledengname: '直接访问',
          percent: '13%',
          itemStyle: { color: '#8d7fec' },
          name: '直接访问|13%'
        },
        {
          value: 310,
          ledengname: '邮件营销',
          percent: '12%',
          itemStyle: { color: '#5085f2' },
          name: '邮件营销|12%'
        },
        {
          value: 234,
          ledengname: '联盟广告',
          percent: '9%',
          itemStyle: { color: '#e7e702' },
          name: '联盟广告|9%'
        },
        {
          value: 135,
          ledengname: '视频广告',
          percent: '5%',
          name: '视频广告|5%'
        },
        {
          value: 1548,
          ledengname: '搜索引擎',
          percent: '61%',
          name: '搜索引擎|61%'
        }
      ]
      return {
        title: [
          {
            text: '品类分布',
            textStyle: {
              fontSize: 14,
              color: '#666'
            },
            left: 20,
            top: 20
          },
          {
            text: '累计订单量',
            subtext: '320',
            x: '34.5%',
            y: '42.5%',
            textAlign: 'center',
            textStyle: {
              fontSize: 14,
              color: '#999'
            },
            subtextStyle: {
              fontSize: 28,
              color: '#333'
            }
          }
        ],
        legend: {
          type: 'scroll',
          orient: 'vertical',
          height: 110,
          left: '70%',
          top: 'middle',
          textStyle: {
            color: '#8c8c8c'
          }
        },
        tooltip: {
          trigger: 'item',
          formatter: function(params) {
            const str = `${params.seriesName}<br/>
            ${params.marker}${params.data.ledengname}<br/>
            数量:${params.data.value}<br/>
            占比:${params.data.percent}`
            return str
          }
        },
        series: [
          {
            name: '访问来源',
            type: 'pie',
            center: ['35%', '50%'],
            radius: ['45%', '60%'],
            avoidLabelOverlap: false,
            label: {
              normal: {
                show: true,
                // position: "outter",
                formatter: function(params) {
                  // console.log(params);
                  return `${params.data.ledengname}|${params.data.percent}`
                }
              }
            },
            labelLine: {
              normal: {
                length1: 5,
                length2: 10,
                smooth: true
              }
            },
            itemStyle: {
              borderWidth: 4,
              borderColor: '#FFF'
            },
            clockwise: true,
            data: modelData
          }
        ]
      }
    }
  }
}
</script>
<style scoped lang="scss">
.bottom-view {
  margin-top: 20px;
  display: flex;
  .view {
    flex: 1;
    width: 50%;
    box-sizing: border-box;
    &:first-child {
      padding: 0 10px 0 0;
    }
    &:last-child {
      padding: 0 0 0 10px;
    }
    .title-wrapper {
      display: flex;
      align-items: center;
      height: 60px;
      box-sizing: border-box;
      border-bottom: 1px solid #eee;
      font-size: 14px;
      font-weight: 500;
      padding: 0 0 0 20px;
    }
    .radio-warpper {
      flex: 1;
      display: flex;
      justify-content: flex-end;
      padding-right: 20px;
    }
    .chart-warpper {
      display: flex;
      flex-direction: column;
      height: 452px;
      .chart-inner {
        display: flex;
        padding: 0 10px;
        margin-top: 20px;
        .chart {
          flex: 1;
          padding: 0 10px;
          .chart-title {
            color: #999;
            font-size: 14px;
          }
          .chart-data {
            font-size: 22px;
            color: #333;
            font-weight: 500;
            letter-spacing: 2px;
          }
          .echarts {
            height: 50px;
          }
        }
      }
      .table-wapper {
        flex: 1;
        margin-top: 20px;
        padding: 0 20px 20px;
        .el-pagination {
          display: flex;
          justify-content: flex-end;
          margin-top: 15px;
        }
      }
    }
  }
}
</style>
